<template>
	<div class="kidneyMatch">
		<el-tabs v-model="activeName" type="card" @tab-click="">
		    <el-tab-pane label="新建配型" name="new">
		    	<div class="base-infor">
		    		<div class="title">进行中</div>
		    		<div class="main clearfix">
					  	<div class="progress">
					  		<span class="pro-label">【进度】</span>
					  		<span class="pro-text">等待手术</span>
					  	</div>
					  	<div class="progress">
					  		<span class="pro-label">【移植编号】</span>
					  		<span class="pro-text">000016</span>
					  	</div>
					  	<div class="progress">
					  		<div class="pro-item">
					  			<span class="pro-label">【供体】</span>
					  			<span class="pro-text">血型A</span>
					  		</div>
					  		<div class="pro-item">
					  			<el-button type="text">完善供体信息</el-button>
					  		</div>
					  	</div>
					  	<div class="progress">
					  		<div class="pro-item">
					  			<span class="pro-label">【移植患者】</span>
					  			<span class="pro-text">张三</span>
					  		</div>
					  		<div class="pro-item">
					  			<el-button type="text">患者详情</el-button>
					  		</div>
					  	</div>
					  	<div class="progress">
					  		<el-button @click="goOper()">完善手术信息</el-button>
					  		<el-button class="delete-btn" type="text" icon="delete"></el-button>
					  	</div>
		    		</div>
		    	</div>
		    	<div class="base-infor">
		    		<div class="title">开始配型</div>
		    		<div class="main">
				        <el-form :inline="true" label-position="right" label-width="80px" :model="newMatchForm" ref="newMatchForm">
				        	<div class="main-item">
				        		<el-form-item label="血型" prop="bloodType" :rules="[{ required: true, message: '血型不能为空'}]">
				        			<el-radio-group v-model="newMatchForm.bloodType">
								      	<el-radio label="A">A</el-radio>
								      	<el-radio label="B">B</el-radio>
								      	<el-radio label="AB">AB</el-radio>
								      	<el-radio label="O">O</el-radio>
								    </el-radio-group>
							  	</el-form-item>
				        	</div>
				        	<div class="main-item">
				        		<el-form-item label="HLA" prop="isTested" :rules="[{ required: true, message: 'HLA不能为空'}]">
				        			<el-radio-group v-model="newMatchForm.isTested">
								      	<el-radio :label="false">未测</el-radio>
								      	<el-radio :label="true">已测</el-radio>
								    </el-radio-group>
							  	</el-form-item>
				        	</div>
						  	<div class="main-item">
						  		<el-form-item label="身高" prop="height" >
							    	<el-input type="text" v-model="newMatchForm.height" auto-complete="off" class="input"></el-input><span class="unit">cm</span>
							  	</el-form-item>
						  	</div>
						  	<div class="main-item">
							  	<el-form-item label="体重" prop="weight">
							    	<el-input type="text" v-model="newMatchForm.weight" auto-complete="off" class="input"></el-input><span class="unit">kg</span>
							  	</el-form-item>
						  	</div>
						</el-form>
						<div class="newMatchBtn">
				            <el-button type="primary" @click="submitForm('newMatchForm')">肾源配型</el-button>
				        </div>
		    		</div>
		    	</div>
		    </el-tab-pane>
		    <el-tab-pane label="已完成配型" name="completed">
		    	<el-table
				    :data="tableData"
				    stripe
				    style="width: 100%">
				    <el-table-column min-width="110px"
				    	prop="date" label="配型时间" align="center">
				    </el-table-column>
				    <el-table-column min-width="95px"
				      	prop="blood" label="肾源血型" align="center">
				    </el-table-column>
				    <el-table-column min-width="80px"
				      	prop="MM" label="MM" align="center">
				    </el-table-column>
				    <el-table-column min-width="120px"
				      	prop="part" label="部位" align="center">
				    </el-table-column>
				    <el-table-column min-width="100px"
				      	prop="name" label="患者姓名" align="center">
				    </el-table-column>
				    <el-table-column min-width="100px"
				      	prop="state" label="状态" align="center">
				    </el-table-column>
				    <el-table-column min-width="115px"
				      	prop="number" label="病案号"  align="center">
				    </el-table-column>
				    <el-table-column label="操作" width="240px" align="center">
				      	<template scope="scope">
				      		<router-link to="/kidney/donatorDetail">供体详情</router-link>
				      		/
				      		<router-link to="/patientDetails" target="_blank">患者详情</router-link>
				      		/
				      		<router-link to="/kidney/operationInfo">手术信息</router-link>
				      	</template>
				    </el-table-column>
				</el-table>
				<div class="pagination-wrap">
					<v-pagination 
						:total='100' 
						:page-size='10' 
						@change='pageChange'
						>				
					</v-pagination>
				</div>
		    </el-tab-pane>
		</el-tabs>
	</div>
</template>

<style lang='scss' rel='stylesheet/scss'>
	.kidneyMatch{
		.base-infor{
			margin-bottom: 20px;
			.input{
				width: 100px;
				.el-input__inner{
					height: 30px;
				}
			}
			.progress{
				float: left;
				width: 20%;
				text-align: center;
				height: 50px;
				line-height: 50px;
				.pro-item{
					height: 25px;
					line-height: 25px;
				}
				.pro-label{
					color: #999;
					font-size: 12px;
				}
				.pro-text{
					font-size: 14px;
				}
			}
			.el-button{
				width: 140px;
			}
			.el-button--text{
				padding: 0;
			}
			.delete-btn{
				width: 20px;
			}
		}
		
		.newMatchBtn{
			margin-left: 20px;
		}
	}
</style>

<script>
	import pagination from '@/components/pagination'
	export default {
		data() {
			return {
				activeName: 'new',
				newMatchForm: {
                    bloodType: 'A',
                    height: '',
                    weight: '',
                    isTested: false
                },
                tableData:[{
            		date: '6/18 18:23',
            		blood: 'A',
            		MM: '1',
            		part: '右髂窝',
                	name:'小明',
                	state: '手术成功',
					number:'TM123453'
            	},{
            		date: '2017/6/28',
            		blood: 'A',
            		MM: '1',
            		part: '右髂窝',
                	name:'小明',
                	state: '手术成功',
					number:'TM123453'
            	}
                ],
                currentPage:1
			}
		},
		computed: {
				
		},
		methods: {
			handleCurrentChange(val) {
		        console.log(`当前页: ${val}`);
		    },
		    pageChange(){
				
			},
		    submitForm(formName){
		    	var self = this;
		    	self.$refs[formName].validate((valid) => {
		          	if (valid) {
		          		if(!self.newMatchForm.isTested){
		          			self.$router.push('/kidney/matchList');
		          		}else{
		          			self.$router.push('/kidney/HLAMatch/2');
		          		}
		          	} else {
		            	console.log('error submit!!');
		            	return false;
		          	}
        		});
		    },
		    goOper(){
		    	var self = this;
		    	self.$router.push('/kidney/operationInfo');
		    }
		},
		components: {
			'v-pagination':pagination
		},
		created(){
			
		}
	}
</script>
